import type { TableColumnsType } from 'antd';
import { Button, Input, message, Space, Table, Tag } from 'antd';
import React, { useEffect, useState } from 'react';
import styles from './index.less';

interface StandardItem {
  id: string;
  code: string;
  name: string;
  type: string;
  department: string;
  updateTime: string;
  status: '已发布' | '未发布' | '已停用';
}

const StandardList: React.FC = () => {
  const [loading, setLoading] = useState(false);
  const [dataSource, setDataSource] = useState<StandardItem[]>([]);
  const [searchKeyword, setSearchKeyword] = useState('');

  const fetchData = async () => {
    setLoading(true);
    try {
      // 这里替换为实际的 API 调用
      const mockData: StandardItem[] = [
        {
          id: '1',
          code: 'STD001',
          name: '企业基本信息标准',
          type: '主数据标准',
          department: '数据管理部',
          updateTime: '2024-03-15',
          status: '已发布',
        },
        {
          id: '2',
          code: 'STD002',
          name: '产品分类标准',
          type: '分类标准',
          department: '产品部',
          updateTime: '2024-03-14',
          status: '未发布',
        },
      ];
      setDataSource(mockData);
    } catch (error) {
      message.error('获取数据失败');
    } finally {
      setLoading(false);
    }
  };

  const handleSearch = () => {
    fetchData();
  };

  const handleView = (id: string) => {
    console.log('查看', id);
  };

  const handleEdit = (id: string) => {
    console.log('编辑', id);
  };

  const handlePublish = async (id: string) => {
    console.log('发布', id);
    message.success('发布成功');
    fetchData();
  };

  const handleDisable = async (id: string) => {
    console.log('停用', id);
    message.success('停用成功');
    fetchData();
  };

  const columns: TableColumnsType<StandardItem> = [
    {
      title: '标准编号',
      dataIndex: 'code',
      key: 'code',
    },
    {
      title: '标准名称',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '标准类型',
      dataIndex: 'type',
      key: 'type',
    },
    {
      title: '所属部门',
      dataIndex: 'department',
      key: 'department',
    },
    {
      title: '更新时间',
      dataIndex: 'updateTime',
      key: 'updateTime',
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      render: (status: StandardItem['status']) => {
        const colorMap = {
          已发布: 'success',
          未发布: 'warning',
          已停用: 'error',
        };
        return <Tag color={colorMap[status]}>{status}</Tag>;
      },
    },
    {
      title: '操作',
      key: 'action',
      render: (_, record) => (
        <Space>
          <Button type="link" onClick={() => handleView(record.id)}>
            查看
          </Button>
          <Button type="link" onClick={() => handleEdit(record.id)}>
            编辑
          </Button>
          {record.status === '未发布' && (
            <Button type="link" onClick={() => handlePublish(record.id)}>
              发布
            </Button>
          )}
          {record.status === '已发布' && (
            <Button type="link" onClick={() => handleDisable(record.id)}>
              停用
            </Button>
          )}
        </Space>
      ),
    },
  ];

  useEffect(() => {
    fetchData();
  }, []);

  return (
    <div className={styles.container}>
      <div className={styles.searchBar}>
        <Space>
          <Input
            placeholder="请输入标准编号或名称"
            value={searchKeyword}
            onChange={(e) => setSearchKeyword(e.target.value)}
            style={{ width: 300 }}
          />
          <Button type="primary" onClick={handleSearch}>
            查询
          </Button>
          <Button onClick={() => setSearchKeyword('')}>重置</Button>
        </Space>
      </div>

      <div className={styles.toolbar}>
        <Space>
          <Button type="primary">新增标准</Button>
          <Button>导入</Button>
          <Button>导出</Button>
        </Space>
      </div>

      <Table
        loading={loading}
        columns={columns}
        dataSource={dataSource}
        rowKey="id"
        rowSelection={{
          type: 'checkbox',
        }}
      />
    </div>
  );
};

export default StandardList;
